<template>
  <div class="info-container">
    <el-row justify="center" align="center" type="flex">
      <el-col :span="16">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="应用名称：">
            {{appInfo.clientName}}
          </el-form-item>
          <el-form-item label="应用描述：">
            {{appInfo.description}}
          </el-form-item>
          <hr>
          <el-form-item label="应用ID：">
            {{appInfo.clientId}}
          </el-form-item>
          <el-form-item label="应用Secret：">
            {{appInfo.clientSecretStr}}
            <el-button v-has="'btn_reset'" type="text" :size="size" @click="resetAppSecret()">
              重新获取
            </el-button>
          </el-form-item>
          <hr>
          <el-form-item label="应用管理员">
            <el-tag class="margin-right-10" v-for="(tag, index) in appInfo.adminList" :key="tag.id" :size="size">
              {{tag.realName}}
            </el-tag>
          </el-form-item>
          <el-form-item>
            <el-button v-has="'btn_set_admin'" type="primary" :size="size" @click="addUser">设置</el-button>
          </el-form-item>
          <hr>
          <el-form-item label="参数配置：">
            <ul v-show="sysClientConfig.dataSync != null">
              <li>
                应用是否同步数据（{{sysClientConfig.dataSync === true ? '是' : '否'}}）
              </li>
            </ul>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <UserDialogSelect ref="UserDialogSelect" :isDialogUserShow.sync="isDialogUserShow" @choose="selectData"></UserDialogSelect>
  </div>
</template>

<script>
  import {mapGetters} from "vuex"
  import api from '@/utils/api.js'
  import UserDialogSelect from '@/components/DialogSelect/user'

  export default {
    name: "ApplicationInfo",
    components: {
      UserDialogSelect
    },
    data () {
      return {
        appInfo: {
          adminList: []
        },
        form: {},
        isDialogUserShow: false,
        sysClientConfig: {}
      }
    },
    computed: {
      ...mapGetters(["size", "closeOnclickModal"])
    },
    mounted () {
      this.getCurrentUserAppInfo()
    },
    methods: {
      // 获取已选取用户列表
      selectData (data) {
        api.saveOrUpdateClientAdmin(data, this.appInfo.id).then(res => {
          this.$message.success('操作成功')
          this.$set(this.appInfo, 'adminList', data)
        })
      },
      // 获取当前用户的应用信息
      getCurrentUserAppInfo () {
        api.getCurrentUserAppAjax().then(response => {
          this.appInfo = response.data
          this.sysClientConfig = response.data.sysClientConfig || {}

          this.$refs.UserDialogSelect.setSelectedList(response.data.adminList)
        })
      },
      // 重新配置当前用户的应用信息
      resetAppSecret () {
        this.delConfirm(
          "重新获取后，旧的secret将失效，请尽快使用新secret调用接口。",
          "提示",
          {
            confirmButtonText: "重新获取",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            api.resetAppSecretAjax().then(response => {
              this.$message({
                type: "success",
                message: "获取成功!"
              })
              this.getCurrentUserAppInfo()
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            })
          })
      },
      // 设置人员
      addUser () {
        this.isDialogUserShow = true
      }
    }
  };
</script>

<style lang="scss">
  .info {
    &-container {
      margin: 30px;

    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>
